<template>
  <div class="table-data1" v-if="allDatas!==''"  style="display:block;">
    <p class="order-detail-title">订单信息</p>
    <div class="user-info-item" v-if="isShip">
      <span>渠道：</span>
      <span>{{allDatas.order_info.merchant_order_sn}}</span>
    </div>
    <div class="user-info-item">
      <span>订单状态：</span>
      <span>{{allDatas.order_info.status_txt}}</span>
    </div>
    <div class="user-info-item">
      <span>支付方式：</span>
      <span>{{allDatas.order_info.pay_type_txt}}</span>
    </div>
    <div class="user-info-item">
      <span>收货地址：</span>
      <span>{{allDatas.order_info.address_full}}</span>
    </div>
    <div class="user-info-item">
      <span>商品总价：</span>
      <span>{{allDatas.order_info.total}}</span>
    </div>
    <div class="user-info-item">
      <span>商品费用：</span>
      <span>{{allDatas.order_info.goods_fee}}</span>
    </div>
    <div class="user-info-item">
      <span>商品数量：</span>
      <span>{{allDatas.order_info.total_num}}</span>
    </div>
    <div class="user-info-item">
      <span>储值支付金额：</span>
      <span>{{allDatas.order_info.point}}</span>
    </div>
    <div class="user-info-item">
      <span>订单备注：</span>
      <span>{{allDatas.order_info.remark}}</span>
    </div>
    <div class="user-info-item">
      <span>是否存在退款：</span>
      <span>{{allDatas.order_info.remark}}</span>
    </div>
    <div class="user-info-item">
      <span>商品类型：</span>
      <span>{{allDatas.order_info.shipping_type_txt}}</span>
    </div>
    <div class="user-info-item">
      <span>订单号：</span>
      <span>{{allDatas.order_info.order_sn}}</span>
    </div>
    <div class="user-info-item">
      <span>下单时间：</span>
      <span>{{allDatas.order_info.create_time}}</span>
    </div>
    <!-- <div class="user-info-item">
      <span>支付时间：</span>
      <span>{{allDatas.order_info.finish_time}}</span>
    </div> -->
    <!-- <div class="user-info-item">
      <span>核销开始时间：</span>
      <span>{{allDatas.order_info.confirm_time}}</span>
    </div> -->
    <div class="user-info-item">
      <span>核销截止时间：</span>
      <span>{{allDatas.order_info.expire_time}}</span>
    </div>
    <div class="user-info-item">
      <span>取消时间：</span>
      <span>{{allDatas.order_info.cancel_time}}</span>
    </div>
   <div class="user-info-item">
      <span>完成时间：</span>
      <span>{{allDatas.order_info.finish_time}}</span>
    </div>
    <p class="order-detail-title">商家信息</p>
    <div class="user-info-item">
      <span>所属商家：</span>
      <span>{{allDatas.shop_info.name}}</span>
    </div>
    <div class="user-info-item">
      <span>商家电话：</span>
      <span>{{allDatas.shop_info.phone}}</span>
    </div>
    <div class="user-info-item">
      <span>商家地址：</span>
      <span>{{allDatas.shop_info.address_full}}</span>
    </div>
     <!-- <p class="order-detail-title">供应商信息</p>
    <div class="user-info-item">
      <span>供应商名称：</span>
      <span>{{allDatas.vendor.name}}</span>
    </div>
    <div class="user-info-item">
      <span>渠道名称：</span>
      <span>{{allDatas.vendor.phone}}</span>
    </div> -->
    <p class="order-detail-title">用户信息</p>
    <div class="user-info-item">
      <span>用户昵称：</span>
      <span>{{allDatas.user_info.nickname}}</span>
    </div>
    <div class="user-info-item">
      <span>用户联系方式：</span>
      <span>{{allDatas.user_info.phone}}</span>
    </div>
    <p class="order-detail-title" v-if="isShip">物流信息</p>
    <div class="user-info-item">
      <span>	物流单号：</span>
      <span>{{shipping_no}}</span>
    </div>
    <!-- <div class="user-info-item" v-if="isShip"> -->
    <div class="user-info-item" v-if="allDatas.shipping_info">
      <span>物流公司：</span>
      <span>{{ allDatas.shipping_info.shipping_company }}</span>
      <div target="_bank" style="margin-left:40px" :data-clipboard-text="allDatas.order_info.order_sn" @click="handleCopy(allDatas.shipping_info.shipping_company,allDatas.shipping_info.shipping_no)" class="user-detail tag-read el-button el-button--primary el-button--mini" size="min">查询</div>
    </div>
    <p class="order-detail-title">商品信息</p>
    <el-table :data="tableDatas" :span-method="objectSpanMethod" border style="width:100%"
     class="table-box">
      <!-- <el-table-column label="名称" prop="goods_name"></el-table-column> -->
      <el-table-column label="订单信息" prop="goods_name" >
        <template slot-scope="scope" >
          <div class="cover">
            <el-image style="width: 50px; height: 50px" :src="scope.row.cover"></el-image>
            <div class="goods_name">{{scope.row.goods_name}}</div>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="数量" prop="num"></el-table-column> -->
      <el-table-column label="规格" prop="spec_item"></el-table-column>
      <el-table-column v-if="manage!=='channel'" label="该渠道结算价" prop="channel_settle_price"></el-table-column>
      <el-table-column v-if="manage!=='channel'" label="商家结算价" prop="shop_settle_price"></el-table-column>
      <el-table-column v-if="isWrite" label="核销码" prop="code"></el-table-column>
      <el-table-column v-if="isWrite" label="有效期" width="360">
        <template slot-scope="scope" >
          <span>{{scope.row.goods.verify_start_time}} -- {{scope.row.goods.verify_end_time}}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="isWrite" label="核销码状态" prop="status_txt"></el-table-column>
    </el-table>
    <div class="sub">
      <!--<el-button v-if="allDatas.order_info.status=='payed' && manage != 'channel'" @click="submitFahuo()" type="primary" size="small">发货</el-button>-->
      <el-button @click="back()" type="primary" size="small">返回</el-button>
      <!-- <el-button v-if="writeBtn" @click="submitHexiao()" type="primary" size="small">核销</el-button> -->
    </div>
    <!-- <EditDialog :isAdd="isAdd" :form="formData" @closeDialog="closeDialog" @loadData="loadData"></EditDialog> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
// import { State, Getter, Mutation, Action } from "vuex-class";
import EditDialog from "./EditDialog.vue";
import orderApi from "@/api/order";
import Clipboard from 'clipboard'
@Component({ components: {EditDialog} })
export default class orderDetail extends Vue {
  // @Getter("user") getUser: any;
  shipping_no: any = '';
  shipping_company: any = '';
  @Provide() state: boolean = false; // 黑白名单状态
  @Provide() isShip: boolean = false; // 物流商品
  @Provide() isWrite: boolean = false; // 核销商品
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  @Provide() tableData: any = []; // 表格数据
  @Provide() tableDatas: any = []; // 表格数据
  @Provide() writeBtn: boolean = false; // 核销按钮
    @Provide() manage: any= '';
  @Provide() allDatas:any={
    order_info:{},
    shop_info:{},
    user_info:{}
  }
  @Provide() isAdd: Boolean = false; // 是否展示添加弹窗
  @Provide() submitData:{
    order_id: any,
    ids: string,
  }={
    order_id: "",
    ids: "",
  }
  @Provide() formData:any={
    id:"",
    shipping_company:"",
    shipping_no:""
  }
  created() {
      let manage:any=localStorage.getItem('manage')
      this.manage = JSON.parse(manage).type;
      console.log(manage);
      this.loadData();
  }
  // 复制单号
  handleCopy(com,nu){
    window.location.href = 'https://www.kuaidi100.com/chaxun?com='+[com]+'&nu='+[nu]
  }
  // 合并单元格
  // objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  //   if (columnIndex === 0||columnIndex === 1||columnIndex === 2||columnIndex === 3) {
  //     if (rowIndex %2 === 0) {
  //       return {
  //         rowspan: 2,
  //         colspan: 1
  //       };
  //     } else {
  //       return {
  //         rowspan: 0,
  //         colspan: 0
  //       };
  //     }
  //   }
      
  // }
  // 关闭弹窗
  closeDialog() {
    this.isAdd = false;
  }
  back(){
    this.$router.go(-1)
  }
  // 发货
  submitFahuo() {
    this.isAdd = true
    this.formData.id = this.$route.query.id
  }
  // 核销
  submitHexiao(){
    this.submitData.order_id=this.$route.query.id
    // this.submitData.ids
    this.tableDatas.forEach(item=>{
      this.submitData.ids+=item.id+','
    })
    this.submitData.ids=this.submitData.ids.substr(0, this.submitData.ids.length - 1)
     orderApi.writeOrder(this.submitData)
      .then((res: any) => {
        this.$emit("closeDialog");
        this.$emit("loadData")
        if(res.data.status){
          this.$message({
            message: '操作成功',
            type: "success"
          });
        }
      });
  }
  loadData() {
   orderApi.orderDetail(this.$route.query.id)
    .then((res: any) => {
        if (res.data.code !== 200) {
            this.$message({
                message: res.data.msg,
                type: "error"
            });
            history.back();
            return false;
        }
      this.allDatas = res.data.data;
      if(res.data.data.shipping_info.shipping_no!==undefined) {
        this.shipping_no = this.allDatas.shipping_info.shipping_no

      }
      if(res.data.data.shipping_info.shipping_company!==undefined) {
        this.shipping_company = this.allDatas.shipping_info.shipping_company
      }
      
      if(this.allDatas.order_info.shipping_type_txt=="ship"){
        this.isShip=true
        this.isWrite=false
        this.tableDatas=res.data.data.order_item
      }else{
        this.isShip=false
        this.isWrite=true
        this.tableData=res.data.data.order_item
        let a:any=[]
        if(this.allDatas.order_info.shipping_type!=='ship'){
          if(this.allDatas.order_info.status=='wait' || this.allDatas.order_info.status=='wait_second'){
            this.writeBtn=true
          }
        }else {
          this.isWrite=false
        }
        res.data.data.order_item.forEach(items => {
          if(items.ticket){
              items.ticket.forEach(item=>{
              item.cover=items.cover
              item.goods_name=items.goods_name
              item.channel_settle_price=items.channel_settle_price
              item.shop_settle_price=items.shop_settle_price
              item.spec_item=items.spec_item
              item.length=items.ticket.length
              item.goods = items.goods
              item.num = items.num
              a.push(item)
            })
          }else{
            a.push(items)
          }
        });
        this.tableDatas=a
        console.log(this.tableDatas)
      }
    })
  }
}
</script>

<style lang="scss" scoped>

.el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
  padding: 0 !important;
}
.table-data1 {
  table{
    td{
      p{
        border: 1px solid #EBEEF5;
        width: 100%;
      }
    }
  }
  .order-detail-title{
    font-size: 16px;
    font-weight: bold;
    line-height: 40px;
    margin-top: 10px;
  }
  .user-info-item {
    width: 100%;
    display: flex;
    line-height: 24px;
    font-size: 14px;
    span {
      display: inline-block;
    }
    span:first-of-type {
      width: 150px;
      text-align: right;
    }
    span:last-of-type {
      padding-left: 15px;
    }
  }
}
.sub{
  text-align: center;
  margin: 50px 0;
}
.cover {
  overflow: hidden;
  padding: 0 10px;
  .el-image {
    float: left !important;
  }
  >.goods_name {
    min-width: 10px;
    max-width: 240px;
    font-size: 12px;
    margin-left: 6px;
    float: left ;
  }
}
</style>
